<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index03-模板字符串</title>
</head>
<body>
<!--  <div id="div1"></div>-->
  <table border="1" width="800">
    <thead>
    <tr>
      <th>编号</th>
      <th>用户名</th>
      <th>性别</th>
      <th>年龄</th>
    </tr>
    </thead>
    <tbody id="useTbody">
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </tbody>
  </table>
  <script type="text/javascript">
      // let person = {
      //   name: "李四",
      //   age: 20,
      //   gender: "男"
      // };
      // let result = "我的名字是:" + person.name + ",我的年龄是:" + person.age + ",我的性别是:" + person.gender;
      // 使用模板字符串来避免拼接字符串出错的可能，``反引号,将来模板字符串中取值使用${变量名}
      // let result = `我的名字是:${person.name},我的年龄是:${person.age},我的性别是:${person.gender}`;
      // console.log(result);
      // let result = `
      //     <h1>一级标题</h1>
      //     <h2>二级标题</h2>
      //     <h3>三级标题</h3>
      // `;
      // console.log(result);
      // document.getElementById("div1").innerHTML = result;
      let userList = [{
        id: 1,
        username: '张三',
        age: 20,
        gender: "男"
      }, {
        id: 2,
        username: '张三2',
        age: 20,
        gender: "男"
      }, {
        id: 3,
        username: '张三3',
        age: 20,
        gender: "男"
      }];
      let strTbody = '';
      userList.forEach(function(user){
        strTbody += `
            <tr>
              <td>${user.id}</td>
              <td>${user.username}</td>
              <td>${user.age}</td>
              <td>${user.gender}</td>
            </tr>
        `;
      });
      document.getElementById("useTbody").innerHTML = strTbody;

  </script>
</body>
</html>